<template>
<div class="express-delivery views-container">
    <div class="wlm-table">
        <div class="warning">
            <div class="flex-row flex-justify-b flex-align-c">
                <div>
                    <p class="warning-title">快递发货</p>
                    <p style="margin-top:10px;">启用后，买家下单可以选择快递发货</p>
                    <p style="margin-top:10px;">计费方式：
                        <el-radio-group v-model="delivery.freight_rule" @change="openSetting">
                            <el-radio label="10">以最高运费结算</el-radio>
                            <el-radio label="20">按商品累加运费</el-radio>
                        </el-radio-group>
                    </p>
                </div>
                <el-switch v-model="delivery.status" active-value="10" inactive-value="20" @change="openSetting">
                </el-switch>
            </div>
        </div>
        <div class="wlm-table-hearder-btn">
           <div style="display:flex;justify-content:space-between;">
              <router-link tag="span" to="/orders/expressDeliveryAdd">
                <el-button size="small" type="primary">添加模板</el-button>
            </router-link>
             <div>
                   <el-form :model="tableFormatData.listTable.files" size="small" label-width="205px" class="retail-form" label-position="right">
                    <el-form-item label="请输入模版名称：" class="filter">
                        <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.listTable.files.name" placeholder="请输入模版名称" style="width:400px;"></el-input>
                         <el-button type="primary" @click="filesSerch">筛选</el-button>
                    <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
                    </el-form-item>
                   
            </el-form>
            </div>
           </div>
           
        </div>
        <!-- 列表 -->
        <template v-if="hasTableData">
          <div  v-for="(item, index) in tableFormatData.listTable.tableData" :key="index" style="margin-bottom:20px;">
            <div class="delivery-table-header flex-row flex-align-c flex-justify-b">
                <div>
                    <span class="ellipsis" style="width:510px;vertical-align: middle;">模板名称：{{item.name}} &nbsp;</span>
                    <span class="orders-gray"> &nbsp;使用中的商品：{{item.goodssum}}个 最后编辑时间：{{item.update_time}}</span>
                </div>
                <div>
                    <!-- <router-link tag="span" :to="{path:'/orders/expressDeliveryAdd', query:{delivery_id:item.delivery_id}}">
                        <el-button type="text">编辑</el-button>
                    </router-link> -->

                    <el-button type="text"  @click="$router.push({path:'/orders/expressDeliveryAdd', query:{id:item.id}})">编辑</el-button>
                    <el-button type="text"  @click="copyPrevEvt(item.id)">复制</el-button>
                    <el-button type="text"  @click="delPrevEvt(item.id)">删除</el-button>
                </div>
            </div>
            <div class="wlm-table-content">
                <el-table :ref="tableFormatData.listTable.key" :border="true" :data="[item]" @selection-change="handleSelectionChange" style="width: 100%">
                    <el-table-column prop="date" label="计费方式" >
                        <template slot-scope="scope">
                            <span>{{methodType[scope.row.type]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date" label="配送范围" >
                        <template v-if="scope.row.region" slot-scope="scope">
                            <p v-for="(item, index) in scope.row.region" :key="index">
                                {{item.cities}}
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" :label="`首${item.type=='0'?'件':'重'}(${item.type=='0'?'个':'kg'})`" >
                        <template v-if="scope.row.region" slot-scope="scope">
                            <p v-for="(item, index) in scope.row.region" :key="index">
                                {{item.num}}
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="运费(元)" >
                        <template v-if="scope.row.region" slot-scope="scope">
                            <p v-for="(item, index) in scope.row.region" :key="index">
                                <span v-if="item.money">￥{{item.money}}</span>
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date" :label="`续${item.type=='0'?'件':'重'}(${item.type=='0'?'个':'kg'})`" >
                        <template v-if="scope.row.region" slot-scope="scope">
                            <p v-for="(item, index) in scope.row.region" :key="index">
                                {{item.numex}}
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="运费(元)" >
                        <template v-if="scope.row.region" slot-scope="scope">
                            <p v-for="(item, index) in scope.row.region" :key="index">
                                <span v-if="item.moneyex">￥{{item.moneyex}}</span>
                            </p>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="pagination-content flex-row flex-justify-b flex-align-c">
            <el-row class="pagination-btns">
                <!-- <el-checkbox class="check-all"  true-label="1" false-label="0" v-model="tableFormatData.listTable.files.checkall" @change="toggleSelection">全部</el-checkbox>
                <el-button class="right-8" :disabled="isGroup" size="mini" @click="delTableList">删除</el-button> -->
            </el-row>
            <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.listTable.pagination.page" :page-sizes="tableFormatData.listTable.pagination.pagesizes" :page-size.sync="tableFormatData.listTable.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.listTable.pagination.total : 0">
            </el-pagination>
        </div>
        </template>
        <div class="no-tabledata" v-if="isTableFormatGetEnd && !hasTableData" v-cloak>
          <svg-icon icon-class="notabledata" />
        </div>
    </div>
    <!--  -->
</div>
</template>

<script>
import {
  deliveryIndex,
  deliveryCopy,
  deliveryDelete,
  deliverySearch,
  deliverySetting
} from '@/api/orders'
import waves from '@/directive/waves' // Waves directive
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table')],
  name: 'ExpressDelivery',
  components: {

  },
  computed: {
    hasTableData() {
      return this.tableFormatData.listTable.tableData.length > 0
    }
  },
  directives: {
    waves
  },
  filters: {

  },
  created() {
    this.$nextTick(() => {
      deliverySearch().then(response => {
        const { data: { data: msgData = {} } } = response
        if (msgData.values) {
          Object.assign(this.delivery, msgData.values)
        }
      })
    })
  },
  data() {
    return {
      methodType: {
        0: '按件计费',
        1: '按重计费'
      },
      delivery: { status: '20', freight_rule: '10', key: 'logistics' },
      freight_rule: '10',
      tableFormatData: {
        current: 'listTable',
        listTable: {
          key: 'listTable',
          api: {
            getList: deliveryIndex,
            delList: deliveryDelete,
            msgConfig: {
              del: {
                type: 'warning',
                msg: '此操作会删除运费模板的所有数据，名下所有如有正在交易的订单、金额，删除后所产生的纠纷由服务商自身承担 如要删除请慎重操作！！'
              }
            }
          },
          tableData: [],
          files: {
            name:'',
            ids: [],
            id: '',
            checkall: '0',
            Recycle: '1'
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  methods: {
    openSetting() {
      deliverySetting({ delivery: this.delivery }).then((response) => {
        const { data: { code = 1 } } = response
        if (code === 1) {
          this.$message.success('操作成功')
        } else {
          this.$message.success('操作失败')
        }
      })
    },
    delPrevEvt(delivery_id) {
      this.tableFormatData.listTable.files.id = delivery_id
      this.delTableItem(delivery_id)
    },
    copyPrevEvt(delivery_id) {
      deliveryCopy({ id: delivery_id }).then((response) => {
        const { data: { code = 1 } } = response
        if (code === 1) {
          this.getTableList()
          this.$message.success('复制成功')
        } else {
          this.$message.success('复制失败')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.express-delivery {
    /deep/ .el-table__header thead.has-gutter tr th {
        background-color: #ffffff;
    }

    .delivery-table-header {
        background: #f2f2f2;
        padding: 10px 24px;
    }
    .no-tabledata{
      font-size: 28em;
      text-align: center;
      /depp/ #icon-notabledata{
        fill: #409EFF !important
      }
    }
}
</style>
